const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    //入口
    entry: "./src/main.js",
    //输出,输出要配置绝对路径
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "static/js/main.js",// 将 js 文件输出到 static/js 目录中
        clean: true,//删除上次打包目录
    },
    //加载器
    module: {
        rules: [
            {
                //用来匹配.css结尾的文件
                test: /\.css$/,
                //use数组里面loader执行顺序是从右到左
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    },
                },
                generator: {
                    filename: "static/imgs/[hash:8][ext][query]",//图片打包存放的位置这里去指定
                }
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: "static/media/[hash:8][ext][query]",
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
                loader: "babel-loader",
            },
        ],
    },
    //插件
    plugins: [
        new ESLintWebpackPlugin({
            //指定检查文件的根目录
            context: path.resolve(__dirname, "src"),
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public/index.html"),
        })
    ],
    //开发使用的服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    //模式
    mode: "development",//开发模式

}